<template>
	<view>
		<uni-nav-bar title="添加好友" :statusBar="true" :border="false" left-icon="back" :fixed="true"
			@clickLeft="$tab.back()">
		</uni-nav-bar>
		<u-line color="#F8F8F8"></u-line>

		<view class="px-32 py-40" v-if="userInfo">
			<view class="flex items-center">
				<image :src="userInfo.avatar" class="image-96 round" mode=""
					@click="$modal.seeBigImage([userInfo.avatar],0)"></image>
				<view class="ml-24">
					<view class="text-32">
						{{ userInfo.nickName }}
					</view>
					<view class="text-9E9E9E mt-8">
						用户名：{{userInfo.userName}}
					</view>
				</view>
			</view>
			<view class="mt-48 text-32 text-9E9E9E">
				发送好友申请
			</view>
			<view class="mt-20">
				<u--textarea v-model="form.content" placeholder="请输入验证内容"></u--textarea>
			</view>
			<view class="mt-40 text-32 text-9E9E9E">
				添加好友备注
			</view>
			<view class="mt-20">
				<u--textarea v-model="form.targetGroupName" placeholder="请输入备注"></u--textarea>
			</view>
		</view>

		<view class="bottom iphoneX">
			<!-- 	<view class="bind text-center text-FFF text-32" v-if="!this.$store.getters.userInfo.superiorInfo" @click="$modal.throttle(bind(),2000)">
				绑定推荐人并添加
			</view> -->
			<view class="confirm text-center text-FFF text-32" @click="confirm">
				添加到通讯录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					targetUserId: '',
					content: "",
					targetGroupName: ""
				},
				userName: null,
				userInfo: null,
			};
		},
		onLoad(e) {
			this.userName = e.userName
			this.getData()
		},
		methods: {
			async getData() {
				const res = await this.$Api.chat.byUserName(this.userName)
				console.log('用户信息', res)
				this.userInfo = res.data
				this.form.targetUserId = res.data.userId
			},
			async confirm() {
				const res = await this.$Api.chat.addressBook(this.form)
				console.log('添加好友', res)
				this.$modal.msg('申请成功!')
				this.$tab.back(1500)
			},
			async bind() {
				const res = await this.$Api.chat.bindSuperior(this.userName)
				this.$store.dispatch('GetInfo').then(info => {
					this.userInfo = info.data
					// this.$modal.msg('绑定成功!')
				})
				this.$modal.msg('申请成功!')
				this.$tab.back(1500)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.bottom {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 9;

		.confirm {
			width: 686rpx;
			height: 88rpx;
			background: #FF323B;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			line-height: 88rpx;
			margin: 0 auto 20rpx;
		}

		.bind {
			width: 686rpx;
			height: 88rpx;
			background: #00aaff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			line-height: 88rpx;
			margin: 0 auto 20rpx;
		}
	}
</style>